<!--
 * @description  : 市管检查-关联经营户组件
 * @descriptionDetail: 市管检查-关联经营户组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view style="padding-bottom: 50px;">
    <theme-navbar
      :is-white="false"
      title="关联经营户"
      :customBack="handlerBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon" v-if="!isDisabled" @tap="handlerSure">
        确定
      </view>
    </theme-navbar>
    <u-empty margin-top="100" text="没有关联经营户" mode="list" v-if="relaCustomers.length == 0"></u-empty>
    <view class="rel-retailer-item" v-for="(item, idx) in relaCustomers" :key="idx">
      <u-row gutter="16">
        <u-col span="12" class="title">
          {{ item.companyName }}
        </u-col>
        <u-col span="6" style="margin: 5px 0px;">
          <u-icon :label="item.managerName" size="30" name="../../static/check/manager.png"></u-icon>
        </u-col>
        <u-col span="3" style="margin: 5px 0px;">
          <u-icon :label="item.relationName" name="edit-pen" :label-color="$theme.u_type_primary" :color="$theme.u_type_primary" size="30" v-if="!isDisabled" @tap="handlerEditRelation(item)"></u-icon>
          <view v-else>
            {{ item.relationName }}
          </view>
        </u-col>
        <u-col span="3" style="margin: 5px 0px;">
          <u-icon
            name="trash"
            color="red"
            size="30"
            style="margin-left: 5px;flex: 1;"
            v-if="!isDisabled"
            @tap="handlerDeleteRelation(item)"
          ></u-icon>
        </u-col>
      </u-row>
    </view>
    <view class="bottom-btns">
      <u-button style="width: 100%;" type="primary" size="medium" v-if="!isDisabled" @click="handlerAdd">
        新增
      </u-button>
    </view>
    <u-select :list="relationDict" :mask-close-able="false" v-model="relationShow" @confirm="handlerConfirm($event)"></u-select>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service.js";
import {CHECK_TASK_SUBJECT,} from "@/common/common_enum.js";
export default {
  name: "RetailerCom",
  props: {
    menuData: {
      type: Object,
      default: () => {},
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      CHECK_TASK_SUBJECT,
      retailerShow: false,  // 零售户选择弹窗
      relaCustomers: [],  // 关联的经营户
      relationDict: [], // 关联关系字典
      relationShow: false,
      relRetailerUuid: "",
      delRelUuids:[],
    }
  },
  watch: {
    menuData(v) {
      // 去重
      this.delRelUuids = v.delRelUuids || [];
      let retailers = [];
      v.relRetailers.forEach(r => {
        let existR = this.relaCustomers.filter(rc => rc.relRetailerUuid == r.relRetailerUuid);
        existR.length == 0 && retailers.push(r);
      });
      this.relaCustomers = [...this.relaCustomers, ...retailers,];
    },
  },
  created () {
    console.log("数据", this.menuData);
    console.log(this.relaCustomers);
    // this.queryRelRetailer();
    this.relaCustomers = [...(this.menuData.relRetailers || []),];
    this.relationDict = this.$store.state.dicts[this.menuData.checkInfo.taskSubject == this.CHECK_TASK_SUBJECT.haveLicense ? 'L_RELATION_TYPE' : 'L_RELATION_TYPE'];
  },
  methods: {
    // 查询关联的零售户
    queryRelRetailer() {
      checkService.relRetailers(this.menuData.checkInfo.retailerUuid).then(dr => {
        dr.success && (this.relaCustomers = [...dr.data, ...(this.menuData.relRetailers || []),]);
      });
    },
    // 添加关联的零售户
    handlerAdd() {
      this.setRouteParam([]);
			// 关联经营户 缺少参数 fsx 2023-12-8 开始
      this.$u.route("/pages/check/temporaryTask?taskSubject=" + this.menuData.checkInfo.taskSubject + "&title=选择关联经营户"+"&isRelRetailer=true");
			// 关联经营户 缺少参数 fsx 2023-12-8 end
    },
    // 修改关联关系
    handlerEditRelation(item) {
      this.relRetailerUuid = item.relRetailerUuid;
      this.relationShow = true;
    },
    handlerDeleteRelation(item){
      this.$modal.confirm(`确定删除【${item.companyName}】吗?`, () => {
        let delInfoArr = this.relaCustomers.filter(c => c.relRetailerUuid == item.relRetailerUuid);
        if(delInfoArr && delInfoArr.length > 0 && delInfoArr[0].relUuid){
          this.delRelUuids.push(delInfoArr[0].relUuid);
        }
        this.relaCustomers = this.relaCustomers.filter(c => c.relRetailerUuid != item.relRetailerUuid);
        this.$forceUpdate();
      });
    },
    // 处理方式
    handlerConfirm(e) {
      this.relaCustomers.map(r => {
        if (r.relRetailerUuid == this.relRetailerUuid) {
          r.relation = e[0].value;
          r.relationName = e[0].label;
        }
      });
      console.log(this.relaCustomers);
      this.relationShow = false;
      this.$forceUpdate();
    },
    // 确定
    handlerSure() {
      if (this.relaCustomers.filter(r => !r.relation).length > 0) {
        this.$u.toast("请选择关联关系");
        return;
      }
      console.log("关联的经营户", this.relaCustomers);
      this.$emit("ok", {
        relaCustomers: this.relaCustomers, 
        comType: this.menuData.type,
        delRelUuids: this.delRelUuids,
      });
    },
    // 关闭
    handlerBack() {
      this.$emit("close", true);
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
.rel-retailer-item {
  padding: 10px 15px;
  border: 1px solid #ececec;
}
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 3px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 10px;
}
</style>